
<style>* {
  line-height: 1em;
}
body {
  margin: 0;
}
.fix-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.5);
}
.fix-wrap .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fix-wrap .content img.abody {
  display: block;
  width: 6.9rem;
  height: 7.01rem;
}
.fix-wrap .content img.close {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
  position: absolute;
  top: 0;
  right: 0;
}
.fix-wrap .content input {
  outline: none;
  border: none;
  position: absolute;
  width: 4.5rem;
  height: 0.7rem;
  left: 50%;
  margin-left: -2rem;
  top: 2.65rem;
  font-size: 0.3rem;
}
.fix-wrap .content .btn {
  left: 50%;
  margin-left: -3.1rem;
  width: 6.2rem;
  height: 1.1rem;
  bottom: 1.5rem;
  position: absolute;
  background: #ccc;
}
.fix-wrap .content .agr {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  bottom: 1rem;
  left: 1.1rem;
}
.fix-wrap .content .agr.hide {
  background: #fff url("./fang@2x.png") no-repeat center center;
  background-size: 0.31rem 0.3rem;
}
.fix-wrap .content .agr.show {
  background: #fff url("./fang2@2x.png") no-repeat center center;
  background-size: 0.31rem 0.3rem;
}

</style>
<div class="fix-wrap">
  <div class="content"><img class="abody" src="./tanchaung.png"/><img class="close" src="./sshanchu.png"/>
    <input placeholder="请输入手机号"/>
    <div class="btn"></div>
    <div class="agr show"></div>
  </div>
</div>
<script>$('.agr').on('click',function(){
  if(/show/.test($('.agr').attr('class'))){
    $('.agr').attr('class','agr hide')
  }else{
    $('.agr').attr('class','agr show')
  }
})
$('.btn').on('click',function(){
  var phone = $('input').val()
  if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){ 
    alert("手机号码有误，请重填");  
    return false; 
  }else{
    $('.fix-wrap').hide()
    // 接口(phone,function(res){
    //   if(res){
    //     // 成功，关闭弹窗
    //     $('.fix-wrap').hide()
    //   }else{
    //     // 失败
    //   }
    // })
  }
})

</script>